<template>
	<view>
		<!-- <view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
			<u-search v-model="search" :height="100" :placeholder="$t('请输入您想要查找的内容')" :show-action="false"
				bg-color="#FFFFFF" :borderColor="'#cccccc'"  @search="doSearch"></u-search>
		</view> -->
		
		<view  class="cardBox" v-for="(item,index) in orderList" style="width: 85%;margin-left: 11%;position: relative;">
			<view :class="currentOrderId==item.order_id?'xuanzhong':''"
			style="border: 1px solid #ccc;width: 50rpx; border-radius: 50rpx; margin-right: 50rpx; height: 50rpx;position: absolute;left: -10%;top:50%" 
			@click="selectOrder(item.order_id)">
			</view>
			
			<view @click="details(item.order_id,true,item.order_status,item.join_order_id)" style="width: 100%; display: flex;align-items: center;justify-content: center;">
				<view style="width: 100%;">
					<view class="title" style="width: 95%;margin-left: 5%;">
						{{ item.goods_name|| $t("暂无信息") }}
					</view>
					<view style="width: 100%;display: flex;">
						<view style="width: 65%;margin-left: 5%;">
							<view class="lineP">
								<view style="flex: 1;">
									<view class="lineP">
										<block v-if="item">
											<Tag class="u-margin-bottom-14" :text="item[$t('item.goods_weight')]+'kg'" color="#008aff">
											</Tag>
											<Tag class="u-margin-bottom-14" :text="item[$t('item.goods_volume')]+'m³'" color="#ff7200">
											</Tag>
											
											<Tag v-if="item.whole_diffuse" class="u-margin-bottom-14" :text="item[$t('item.whole_diffuse')]" color="#18cee3"></Tag>
										</block>
									</view>
									<!-- <view>
										{{item.car_l + 'm*'  + item.car_w + 'm*'  + item.car_h + 'm' || ''}}
									</view> -->
									<view class="lineP u-margin-bottom-0">
										<block v-if="item">
											<FromToCountry :item="item"></FromToCountry>
										</block>
									</view>
								</view>	
							</view>
							
							<view class="address">
								<view class="label">{{$t("出发城市")}}</view>
								<image :src="HTTP_IMG_UTL+'tubiao1.png'" class="headline_img" />
								<view class="u-flex-1">
									{{item.release_info.hyd || $t("暂无信息") }}
								</view>
							</view>
							<view class="address">
								<view class="label">{{$t("到达城市")}}</view>
								<image :src="HTTP_IMG_UTL+'tubiao2.png'" class="headline_img" />
								<view class="u-flex-1">
									{{item.release_info.shd || $t("暂无信息") }}
								</view>
							</view>
							
							<block v-if="item">
								<view style="width: 100%;" >
									<TransportType :item="item"></TransportType>
								</view>
							</block>
						</view>
						
						<view style="width: 30%;">
							<view class="carPicture">
								<img :src="HTTP_IMG_UTL+'huowuPic.png'" alt="" />
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
	
	
		<u-button @click="tijiao()"  style="" :custom-style="customStyle2" hover-class="none" :disabled="subDisabled" type="primary"
			>
			{{ $t('选择关联订单') }}
		</u-button>
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	import FromToCountry from '@/components/FromToCountry.vue'
	import Tag from '@/components/Tag.vue'
	import TransportType from '@/components/TransportType.vue'
	import formRadio from "@/components/buildForm/formRadio.vue";
	
	export default {
		components: {
			FromToCountry,Tag,TransportType,formRadio
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				//语言
				lang: this.$i18n.locale,
				//文字
				text:{			
					xieyi:this.$t('关联订单')
				},
				currentOrderId: null, // 当前选中的订单ID
				orderList:[],
				search:'',
				page:1,
			
				subDisabled:false,
				customStyle2: {
					width: '500rpx',
					height: '83rpx',
					marginTop:'20rpx',
					fontSize:'24rpx',
					background: '#ff2323',
					borderRadius: '56rpx'
				},
				
				main_order_id:'',
				join_order_id:'',
				order_type:'',
				type:'',
				
			}
		},
		onLoad(options) {
			if(options.main_order_id){
				this.main_order_id = options.main_order_id
			}
			if(options.join_order_id){
				this.join_order_id = options.join_order_id
			}
			if(options.order_type){
				this.order_type = options.order_type
			}
			this.getList(options.join_order_id)
		},
		methods:{
			getList(join_order_id) {
				const that = this
				this.$u.api.order.relatedOrdersList({
					status: '1',
					search: that.search,
					page:that.page,
					type:2,
					join_order_id:join_order_id,
					order_type:this.order_type,
				}).then(res => {
					console.log(res)					
					if (that.page == 1) {
						that.orderList = res
					} else {
						var list1 = res
						that.orderList = [...that.orderList, ...list1]
					}					
					
				}).catch(err => {
					console.log(err)
				})
			},
			selRadio(e,data){
				console.log(e,data)
			},
			selectOrder(orderId) {
				
			  
			  this.currentOrderId = orderId;
			  
			  // 在这里执行其他的操作，比如获取订单详情等
			},
			details(id,isDetail,status,join_order_id=0) {
				var options_status = '';
				/*状态:0=待参与,
				1=已参与,
				2=进行中(已合作),
				3=已取消,
				4=申请售后,
				5=售后已完成,
				6=发布方确认收货(进行中),
				7=已评价,
				8=同意延期付款(已完成),
				9=未付款(不同意延期),
				10=已完成,
				11=待开始
				*/
				if(status==0){
					options_status = 0
				}else if(status==1){
					options_status = 1
				}else if(status==2){
					options_status = 2
				}else if(status==3){
					options_status = 3
				}else if(status==4){
					options_status = 3
				}else if(status==5){
					options_status = 3
				}else if(status==6){
					options_status = 2
				}else if(status==7){
					options_status = 3	
				}else if(status==8){
					options_status = 3
				}else if(status==9){
					options_status = 2
				}else if(status==10){
					options_status = 3
				}else if(status==11){
					options_status = 2
				}
				
				if((options_status==2)||(options_status==3)){
					this.$u.route({
						url: "/pages/ordering/orderDetail",
						params: {
							id: id,
							join_order_id:join_order_id,
							status: options_status,
							isDetail: isDetail
						}
					})
				}else{
					this.$u.route({
						url: "/pages/order/published/published",
						params: {
							id: id,
							status: options_status,
							isDetail: isDetail
						}
					})
				}
				
			
			},
			tijiao(){
				const that = this
				if((that.currentOrderId=='')||(that.currentOrderId==null)){
					uni.showModal({
						content: that.$t('请选择关联订单'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					return false
				}
				this.$u.api.order.NewRelatedOrders({
					order_id: that.currentOrderId,
					main_order_id: that.main_order_id
				}).then(res => {
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: this.$t('是'),
					})
					setTimeout(function() {
						uni.navigateBack({
							delta: -1
						});
					}, 2000);
					
				})
			},
			doSearch(){
				this.getList(this.join_order_id)
			}
		}
	}
</script>

<style lang="scss">
	@import "@/common/orderDetail.scss";
	.carPicture {
		margin-top: 100rpx;
		img {
			height: 160rpx;
			width: 180rpx;
		}
	}
	
	.lineP {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		position: relative;
		font-size: 16px;
		position: relative;
		flex-wrap: wrap;
	
		.tag {
			margin-top: 20rpx;
		}
	
		&.shot {
			width: 48%;
			flex-wrap: wrap;
	
	
		}
	
	
	
		.headline_img {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	
		.label {
			font-weight: 600;
			margin-bottom: 10rpx;
			
		}
	}
	
	.title {
		color: #000000;
		text-align: left;
		font-size: 38rpx;
		font-weight: 600;
		margin-top: 10rpx;
		word-break: break-all;
		margin-bottom: 20rpx;
	}
	
	.address {
		margin-bottom: 32rpx;
		font-size: 28rpx;
		position: relative;
		padding-left: 45rpx;
		// font-weight: 600;
	
		// .warp {
		// 	width: 55%;
		// }
	
		.headline_img {
			position: absolute;
			left: 0;
			top: 4rpx;
			width: 30rpx;
			height: 30rpx;
		}
	
		.label {
			font-weight: 600;
			margin-bottom: 10rpx;
			color: #ff7200;
		}
	}
	
	.bidding_time{
		width: 70%;
	}
	
	.xuanzhong{background-color: orangered;}
</style>